<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>用html5的canvas画布绘制贝塞尔曲线</title>
</head>

<body>
    <canvas id="keleyi_com" height="300" width="400"></canvas>
    
    <script type="text/javascript">
        function draw(id) {
            var canvas = document.getElementById(id);
            if (canvas == null)
                return false;
            var context = canvas.getContext('2d');
            context.fillStyle = "#eeeeff";
            context.fillRect(0, 0, 400, 300);
            var n = 0;
            var dx = 150;
            var dy = 150;
            var s = 100;
            context.beginPath();
            context.globalCompositeOperation = 'and';
            context.fillStyle = 'rgb(100,255,100)';
            context.strokeStyle = 'rgb(0,0,100)';
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 15 * 11;
            for (var i = 0; i < 30; i++) {
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);
            }
            context.closePath();
            context.fill();
            context.stroke();
        }
        draw("keleyi_com");
    </script>
</body>

</html>